<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat</title>
    <script>
      const ROOM_ID = "<%= roomId %>";
      document.title += " | " + ROOM_ID;
    </script>
    <!-- libraries -->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/assets/images/favicon.svg"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script src="/socket.io/socket.io.js" defer></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
    <script src="https://kit.fontawesome.com/c939d0e917.js"></script>

    <!-- scripts -->
    <script src="/js/firebaselogin.js"></script>
    <script src="/js/logout.js"></script>
    <script src="/js/chat.js" defer></script>

    <!-- css -->
    <link rel="stylesheet" href="/styles/chatroom.css" />
  </head>
  <body>
    <div class="dark-light">
      <svg
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
      </svg>
    </div>
    <div class="back-button" onclick="window.location.href='/home'">
      <img
        src="https://img.icons8.com/ios-glyphs/90/ffffff/circled-left.png"
        style="width: 40px; height: 40px"
      />
    </div>
    <div class="app">
      <div class="main__header">
        <h4>
          Chat Room
          <button
            style="
              background-color: #3a6df0;
              border: none;
              padding: 8px 26px;
              color: #fff;
              border-radius: 10px;
              margin-top: 16px;
              cursor: pointer;
              transition: 0.3s;
              white-space: nowrap;
              font-size: 16px;
            "
            type="button"
            id="StartMeeting"
            onclick="window.location.href = '/' + ROOM_ID"
          >
            Join Meeting
          </button>
        </h4>
      </div>
      <div class="main__chat_window">
        <ul class="messages"></ul>
      </div>
      <div class="main__message_container">
        <input
          id="chat_message"
          style="padding: 3.5px 16px"
          type="text"
          placeholder="Type message here..."
        />
        <button class="content-button" type="button" id="send-text">></button>
      </div>
    </div>
  </body>
</html>
